{% extends '../layout.html' %}

<!-- header-start -->
{% block head %}
    {% parent %}
    <meta name="keywords" content="手机壳编辑" />
    <meta name="description" content="手机壳编辑" />

    <link rel="stylesheet" type="text/css" href="{{ config.resourcePath.staticRoot }}/component/layer/layer.css" />
    <link rel="stylesheet" type="text/css" href="{{ config.resourcePath.staticRoot }}/css/page/edit.css" />
{% endblock %}
<!-- header-end -->
<!-- body-start -->
{% block content %}
    <header class="header">
        {% if type=='diy' %}
        <a class="button float-left color-white m-l-10">
            <span id="user-add-title">添加图片</span>
            <input id="edit-choose-img" class="edit-choose-img" type="file">
        </a>
        {% endif %}
        <p class="title">{{ message.template.name }}</p>
        <a class="button float-right color-white m-r-10" onclick="editJS.SynthesisImg()">
            {% if type=='diy' %}
                提交
            {% else %}
                提交订单
            {% endif %}
        </a>
    </header>
    {#底部操作栏#}

    {% if type=='diy' %}
    <div class="edit-bottom">
        <div class="edit-option">
            <a class="tab-item col-2 active" onclick="editJS.tabCheck(this)">萌板</a>
            <a class="tab-item col-2" onclick="editJS.tabCheck(this)">推荐图案</a>
        </div>
        <div class="edit-material-box">
            {#蒙版#}
            <div class="tab-item">
                <ul class="check-nav-tap">
                    {% for key,mask in message.mask %}
                        <li class="{% if key==0 %}active{% endif %}" onclick="editJS.tabCheckItem(this)">
                            {{ mask.type }}
                        </li>
                    {% endfor %}
                </ul>
                <ul class="check-nav-list">
                    {% for key,mask in message.mask %}
                        <li class="list {% if key>0 %}hide{% endif %}">
                            <a class="tab null" data-update="false">
                                <span class="tip">空白模板</span>
                            </a>
                            {% for content in mask.content %}
                                <a class="chartlet-item tab" style="background-image: url('/ravimg?src={{content.url }}');" data-img="/ravimg?src={{content.url }}" data-update="false"></a>
                            {% endfor %}
                        </li>
                    {% endfor %}
                </ul>
            </div>
            {#贴图#}
            <div class="tab-item hide">
                <ul class="check-nav-tap">
                    {% for key,chartlet in message.chartlet %}
                        <li class="{% if key==0 %}active{% endif %}" onclick="editJS.tabCheckItem(this)">
                            {{ chartlet.type }}
                        </li>
                    {% endfor %}
                </ul>
                <ul class="check-nav-list">
                    {% for key,chartlet in message.chartlet %}
                        <li class="list {% if key>0 %}hide{% endif %}">
                            {#<a class="tab null">#}
                                {#<span class="tip">空白模板</span>#}
                            {#</a>#}
                            {% for content in chartlet.content %}
                                {#<a class="chartlet-item tab" style="background-image: url('/ravimg?src={{content.url }}');" data-img="/ravimg?src={{content.url }}"></a>#}
                                <a class="chartlet-item tab" style="background-image: url('/ravimg?src={{content.url }}');" data-img="/ravimg?src={{content.url }}" data-type="{{ content.type }}"></a>
                            {% endfor %}
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>
    {% endif %}
    <div id="content-edit" class="content-edit" style="{% if type!='diy' %}bottom:0px;{% endif %}">
        <!-- 素材编辑 -->
        {% if type=='diy' %}
            <div id="edit-box" class="edit-box">
                <img id="edit-mask" class="edit-mask" width="100%">
                <div id="edit" class="edit">
                    <div id="edit-user-img" class="edit-item edit-user-img">
                        <img id="user-image" class="user-image compose-img"/>
                    </div>
                    <div id="edit-templet" class="edit-item">
                        <img id="templet-image" class="user-image compose-img"/>
                    </div>
                    <div id="edit-chartlet" class="edit-item edit-chartlet">

                    </div>
                </div>
            </div>
        {% else %}
            <img class="edit-mask-fix" src="/ravimg?src={{ message.template.basemap }}">
        {% endif %}
    </div>
    {% if type=='diy' %}
    <button id="edit-text" class="edit-btn edit-text">
        文字
    </button>
    <!-- 文字编辑 -->
    <div id="edit-text-box" class="edit-text-box">
        <div id="edit-text-content" class="edit-text-content">
            <div class="content-block">
                <div class="buttons-tab">
                    <a class="tab-link" v-for="(tab, index) in tabs" :class="{active:tab.active}" @click="tabChange(index)">
                        {% raw %}{{ tab.text }}{% endraw %}
                    </a>
                </div>
            </div>
            <a class="btn" @click="submit">确认添加</a>
            <div class="edit-text-scroll">
                <div class="edit-text-tab" v-show="tabs[0].active">
                    <textarea class="edit-textarea" placeholder="最多输入12个字" v-model="text" maxlength="12"></textarea>
                    <div class="text-direction">
                        文字方向：
                        <input id="horizontal" type="radio" name="vertical" value="0" checked><label for="horizontal">横向</label>
                        <input id="vertical" type="radio" name="vertical" value="1"><label for="vertical">纵向</label>
                    </div>
                </div>
                <div class="edit-text-tab" v-show="tabs[1].active">
                    <ul class="edit-text-font clearfix">
                        <li v-for="(font, index) in fonts" :class="{active:font.active}" @click="change(fonts,index)"><img :src="font.img" width="80%"></li>
                    </ul>
                </div>
                <div class="edit-text-tab" v-show="tabs[2].active">
                    <ul class="edit-text-color clearfix">
                        <li class="iconfont" v-for="(item, index) in colors" :style="{backgroundColor:item.color}" :class="{active:item.active}" @click="change(colors,index)"></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- 指引 -->
    <div id="guide-box" class="guide-box">
        <div class="guide-tips top-left fadeIn">
            <img class="w-105" src="/image/edit/step1.png">
        </div>
        <div class="guide-tips bottom-left fadeIn">
            <img class="w-106" src="/image/edit/step2.png">
        </div>
        <div class="guide-tips bottom-left fadeIn">
            <img class="w-106" src="/image/edit/step3.png">
        </div>
        <div class="guide-tips top-right fadeIn">
            <img class="w-105" src="/image/edit/step4.png">
        </div>
        <div class="guide-tips top-right fadeIn">
            <img class="w-63" src="/image/edit/step5.png">
        </div>
        <button id="guide-next" class="guide-next fadeIn">开始体验</button>
    </div>

    <!-- 操作提示 -->
    <div id="operation-box" class="operation-box">
        <img src="/image/base/guide.png" width="100%">
    </div>
    {% endif %}

    <div class="pop-pages add-order">
        <div class="headers">
            <i class="iconfont icon-prev f-s-20 float-left w-50 text-a-c" onclick="editJS.closeAddOrd();"></i>
        </div>
        <div class="clearfix-row">
            <div class="display-b p-l-10 p-r-10">
                <div class="clearfix-row m-t-16">
                    <div class="text-box display-f">
                        <input id="receiver" class="flex-1" type="text" placeholder="收件人">
                    </div>
                </div>
                <div class="clearfix-row m-t-16">
                    <div class="text-box display-f">
                        <input id="mobile" class="flex-1" type="text" placeholder="手机号码">
                    </div>
                </div>
                <div class="clearfix-row m-t-16">
                    <div class="text-box display-f">
                        <div class="flex-3 m-r-10">
                            <select class="btn-select w-bar-100" id="province" class="select" onchange="addAddress.changeProvince(this)"></select>
                        </div>
                        <div class="flex-3 m-r-10">
                            <select class="btn-select w-bar-100" id="city" class="select" onchange="addAddress.changeCity(this)"></select>
                        </div>
                        <div class="flex-3">
                            <select class="btn-select w-bar-100" id="district" class="select" onchange="addAddress.changeDistrict(this)"></select>
                        </div>
                    </div>
                </div>
                <div class="clearfix-row m-t-16">
                    <div class="text-box display-f" data-hint="详细地址不能为空">
                        <textarea id="detail" class="flex-1 text-a-l h-100 p-t-10 p-b-10" placeholder="详细地址"></textarea>
                    </div>
                </div>
                <div class="clearfix-row m-t-16">
                    <div class="text-box display-f">
                        <input id="remark" class="flex-1" type="text" placeholder="备注">
                    </div>
                </div>
                <div class="clearfix-row m-t-16">
                    <div class="text-box display-f">
                        <input id="coupon" class="flex-1" type="text" placeholder="优惠码" onblur="editJS.getCoupon()">
                    </div>
                </div>
                <div class="clearfix-row m-t-16">
                    <a class="counts-add" onclick="editJS.counts('add')">+</a>
                    <div class="text-box float-left m-l-5 m-r-5">
                        <input id="counts" type="text" class="w-50 text-a-c" placeholder="购买数量" value="1" onchange="editJS.counts()"/>
                    </div>
                    <a class="counts-minus" onclick="editJS.counts('minus')">-</a>

                    <span class="float-left line-h-40 m-l-20 color-red" id="price">￥0</span>
                </div>
                <a class="clearfix-row">
                    <a class="btn-white active post m-b-10" onclick="editJS.upload()">
                        提交
                    </a>
                </a>
            </div>
        </div>
    </div>
{% endblock %}
<!-- body-end -->
<!-- script-start -->
{% block script %}
    <script id="LoadOkRemove">
        var MESSAGE={};
        try {
            MESSAGE={{ message|json_encode|raw }};
        }catch (e){}
        $("#LoadOkRemove").remove();
    </script>
    {#<script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>#}
    <script type="text/javascript" src="{{ config.resourcePath.staticRoot }}/component/layer/layer.js"></script>
    <script type="text/javascript" src="{{ config.resourcePath.staticRoot }}/js/base/lib/vue.js"></script>
    <script type="text/javascript" src="{{ config.resourcePath.staticRoot }}/js/base/lib/vue-resource.min.js"></script>
    <script type="text/javascript" src="{{ config.resourcePath.staticRoot }}/js/base/lib/exif.min.js"></script>
    <script type="text/javascript" src="{{ config.resourcePath.staticRoot }}/js/base/lib/fastclick.min.js"></script>
    <script type="text/javascript" src="{{ config.resourcePath.staticRoot }}/js/base/lib/touch-0.2.14.min.js"></script>
    <script type="text/javascript" src="{{ config.resourcePath.staticRoot }}/js/base/lib/imageCompose.js"></script>

    {% if type=='diy' %}
    <script type="text/javascript" src="{{ config.resourcePath.staticRoot }}/js/base/lib/edit.js"></script>
    {% endif %}
    <script type="text/javascript" src="{{ config.resourcePath.staticRoot }}/js/base/lib/address.js"></script>
    <script type="text/javascript" src="{{ config.resourcePath.staticRoot }}/js/page/edit.js"></script>
{% endblock %}
<!-- script-end -->
